<template>
  <div class="home-box">
    <h1>前端特效页面</h1>
    <div class="home-content">
      <router-link to="/slidingSwitch" style="--i:1">滑动按钮悬停</router-link>
      <router-link to="/inputEffect" style="--i:2">输入文本动画</router-link>
<!--      <router-link to="/waterfall" style="&#45;&#45;i:3">瀑布流</router-link>-->
    </div>
  </div>
</template>

<script lang="ts" setup>
</script>

<style scoped lang="less">
.home-box {
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at center, #555, #000);

  h1 {
    color: #fff;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .home-content {
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;

    a {
      /* 相对定位 */
      position: relative;
      /* 将a元素转为块级元素，不然无法设置宽和高 */
      display: block;
      width: 140px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      margin: 40px;
      color: plum;
      text-decoration: none;
      font-size: 20px;
      /* 这里加个动画过渡 */
      transition: all 0.3s ease-in-out;
      /* 我们来改变各个a元素的颜色【划重点】 */
      /* 大家看到效果了吧，是不是很神奇 */
      /* hue-rotate是颜色滤镜，可以加不同的度数来改变颜色，这里我们用了calc自动计算函数，以及var函数来调用我们给每一个a元素设置的不同的自定义属性1~5，然后分别乘以60度，就能够分别得到不同的颜色 */
      filter: hue-rotate(calc(var(--i) * 60deg));

      &::before,
      &::after {
        /* 将两个伪元素的相同样式写在一起 */
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        border: 2px solid plum;
        /* 这里也加一个动画过渡 */
        /* 最后的0.3s是延迟时间 */
        transition: all 0.3s ease-in-out 0.3s;
      }

      &::before {
        top: 0;
        left: 0;
        /* 删除左边元素的右、下边框 */
        border-right: 0;
        border-bottom: 0;
      }

      &::after {
        right: 0;
        bottom: 0;
        /* 删除右边元素的左、上边框 */
        border-top: 0;
        border-left: 0;
      }

      &:hover {
        background-color: plum;
        color: #000;
        /* 添加发光效果和倒影 */
        box-shadow: 0 0 50px plum;
        /* below是下倒影 1px是倒影和元素相隔的距离 最后是个渐变颜色 */
        -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(0, 0, 0, 0.3));
        /* 这里我们为以上属性设置一下延迟时间 */
        transition-delay: 0.4s;

        &::before,
        &::after {
          width: 138px;
          height: 58px;
          /* 这里不需要延迟 */
          transition-delay: 0s;
        }
      }
    }
  }
}
</style>
